<template>
	<view :style="render.data=='position'?'width:100%;display:flex;justify-content:center':''">
		<view v-if="render.data==='exchangePhone'" :class="'text-message ' + (isMine ? 'my-text' : '')">
			<view class="message-body-span">
				<text v-if="isMine" class="message-body-span-text">交换电话请求已发送</text>
				<text v-if="!isMine&&(render.extension.agree===null||render.extension.agree===false)"
					class="message-body-span-text">对方请求交换电话</text>
				<text v-if="!isMine&&render.extension.agree===true" @click="callPhone(render.extension.phone)"
					class="message-body-span-text">电话：{{render.extension.phone}}</text>
			</view>
			<view v-if="!isMine&&render.extension.agree===null" class="message-body-btn">
				<view @click="exchangePhoneCall(1)" class="operation-btn">拒绝</view>
				<view @click="exchangePhoneCall(2)" class="operation-btn">同意</view>
			</view>
		</view>
		<view v-else-if="render.data==='sendResume'" :class="'text-message ' + (isMine ? 'my-text' : '')">
			<view class="message-body-span">
				<text class="message-body-span-text">{{ isMine?'已向对方发送简历请求':'对方想发送个人简历' }}</text>
			</view>
			<view v-if="!isMine&&render.extension.agree===null" class="message-body-btn">
				<view @click="resumeCall(1)" class="operation-btn">拒绝</view>
				<view @click="resumeCall(2)" class="operation-btn">同意</view>
			</view>
		</view>
		<view v-else-if="render.data==='getResume'" :class="'text-message ' + (isMine ? 'my-text' : '')">
			<view class="message-body-span">
				<text class="message-body-span-text">{{ isMine?'已向对方获取简历':'对方想获取个人简历' }}</text>
			</view>
			<view v-if="!isMine&&render.extension.agree===null" class="message-body-btn">
				<view @click="resumeCall(3)" class="operation-btn">拒绝</view>
				<view @click="resumeCall(4)" class="operation-btn">同意</view>
			</view>
		</view>
		<view v-else-if="render.data==='resume'" :class="'text-message ' + (isMine ? 'my-text' : '')">
			<view class="message-body-span">
				<text @click="openResume(render.extension)"
					class="message-body-span-text">{{render.description}}(点击查看)</text>
			</view>
		</view>
		<view v-else-if="render.data==='invited'" @click="toInterview" :class="'text-message ' + (isMine ? 'my-text' : '')">
			<view class="message-body-span">
				<text class="message-body-span-text">{{isMine?'已向对方发送面试邀请点【点击查看】':'对方向您发起了一个面试邀请【点击查看】'}}</text>
			</view>
		</view>
		<view style="padding-bottom: 12rpx;width: auto;" v-else-if="render.data==='c2cCalling' || render.data === 'groupCalling'" :class="'text-message ' + (isMine ? 'my-text' : '')">
			<view class="message-body-span">
				<text class="message-body-span-text">{{ render.extension }}</text>
			</view>
		</view>
		<view v-else-if="render.data==='position'" class="position-card">
			<view class="list-item" @click="navigate('/page_other/job_hunting/job_detail/index?id='+position.id+'&count=1')">
				<view class="list-info">
					<view class="title">{{position.jobTitle}}</view>
					<view class="address">{{position.jobAddress}}</view>
					<view class="label-block">
						<view class="label-item" v-for="label in position.welfareList">{{label.data}}</view>
					</view>
					<view class="wage" v-if="position.minSalary">{{position.minSalary}}-{{position.maxSalary}}<text class="unit">元</text></view>
					<view class="wage" v-else>面议</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		formateTime
	} from '../../../base/common.js';
	import {
		getToAccount,
		getPhoneByImUserID
	} from '@/util/im.js';
	import {
		getResumeUrl,
		followAdd
	} from '@/api/im.js';
	import {
		downloadFile
	} from '@/api/file.js'
	import {findAllJobById} from '@/api/position.js'
	export default {
		data() {
			return {
				render:null,
				phone:null,
				position:null,
			};
		},
		components: {},
		props: {
			message: {
				type: Object,
				default: () => {}
			},
			isMine: {
				type: Boolean,
				default: true
			}
		},
		watch: {
			message: {
				handler: function(newVal){
					this.render = this.parseCustom(newVal);
				},
				immediate: true,
				deep: true
			}
		},
		mounted() {
			//监听处理视频面试接受或拒绝，修改邀请消息
			uni.$on('interviewHandle',(ops)=>{
				if(this.render.data==='invited'&&this.render.extension.id==ops.id){
					let thisMessage = JSON.parse(JSON.stringify(this.message));
					let extension = JSON.parse(thisMessage.payload.extension);
					extension.agree=ops.agree;
					thisMessage.payload.extension = JSON.stringify(extension);
					uni.$TUIKit.modifyMessage(thisMessage)
				}
			})
			this.phone=this.$store.getters.user.mobile
		},
		beforeDestroy() {
			uni.$off('interviewHandle');
		},
		methods: {
			navigate(url){
				if(url){
					uni.navigateTo({
						url
					})
				}
			},
			callPhone(phone){
				uni.showModal({
					title:'提示',
					content:`确定呼叫 ${phone} 吗`,
					success(e) {
						if(e.confirm){
							uni.makePhoneCall({
								phoneNumber:phone
							})
						}
					}
				})
			},
			toInterview(id){
				let url=`/page_other/interview/view?id=${this.render.extension.id}&isMine=${this.isMine}&userID=${getToAccount(this.message)}`;
				uni.navigateTo({
					url
				})
			},
			//简历消息的查看按钮事件
			openResume(url) {
				if (url) {
					uni.showLoading({
						title: '加载中',
						mask: true,
					})
					downloadFile(url).then((res) => {
						uni.hideLoading()
						uni.openDocument({
							filePath: res.tempFilePath,
							fail: (fail) => {
								this.showToast('打开简历失败')
							}
						})
					}).catch((res) => {
						uni.hideLoading()
						this.showToast('下载简历失败')
					})
				}
			},
			//处理简历逻辑
			resumeCall(type) {
				const to = getToAccount(this.message);
				let thisMessage = JSON.parse(JSON.stringify(this.message));
				let extension = JSON.parse(thisMessage.payload.extension);
				if (type === 1 || type === 3) { //拒绝
					extension.agree = false;
					thisMessage.payload.extension = JSON.stringify(extension);
					uni.$TUIKit.modifyMessage(thisMessage)
					//发送拒绝文本
					const message = uni.$TUIKit.createTextMessage({
						to,
						conversationType: this.message.conversationType,
						payload: {
							text: type === 1 ? '拒绝接收简历' : '拒绝发送简历'
						}
					})
					this.$sendTIMMessage(message)
				} else {
					uni.showLoading({
						title:'加载中',
						mask:true
					})
					const mobile = type === 2 ? getPhoneByImUserID(this.message.from) : getPhoneByImUserID(this.message
						.to);
					getResumeUrl({
						mobile
					}).then((res) => {
						uni.hideLoading()
						extension.agree = true
						thisMessage.payload.extension = JSON.stringify(extension);
						uni.$TUIKit.modifyMessage(thisMessage)
						const resume = res;
						const message = uni.$TUIKit.createCustomMessage({
							to,
							conversationType: this.message.conversationType,
							payload: {
								data: 'resume',
								description: type === 2 ? '已接收简历' : '已发送简历',
								extension: resume,
							}
						})
						this.$sendTIMMessage(message)
						if (type === 2) {
							this.submitSwapResume(mobile, 2)
						} else {
							this.submitSwapResume(getPhoneByImUserID(this.message.from), 1)
						}
					}).catch(() => {
						uni.hideLoading()
						this.showToast('获取简历地址失败')
					})
				}
			},
			$sendTIMMessage(message) {
				uni.$emit('updateMessageList', message);
				uni.$TUIKit.sendMessage(message).then(() => {

				}).catch(() => {
					this.showToast('消息发送失败')
				})
			},
			//处理交换电话逻辑
			exchangePhoneCall(type) {
				const to = getToAccount(this.message);
				let thisMessage = JSON.parse(JSON.stringify(this.message));
				let extension = JSON.parse(thisMessage.payload.extension);
				let message;
				if (type === 1) { //拒绝
					extension.agree = false;
					//发送拒绝文本
					message = uni.$TUIKit.createTextMessage({
						to,
						conversationType: this.message.conversationType,
						payload: {
							text: '拒绝交换电话'
						}
					})
				} else {
					extension.agree = true
					message = uni.$TUIKit.createTextMessage({
						to,
						conversationType: this.message.conversationType,
						payload: {
							text: `电话：${this.phone}`
						}
					})
				}
				thisMessage.payload.extension = JSON.stringify(extension);
				uni.$TUIKit.modifyMessage(thisMessage)
				this.$sendTIMMessage(message)
			},
			//提交交换简历的记录
			submitSwapResume(mobile, followType) {
				const data = {
					follow: 5,
					mobile,
					followType
				}
				followAdd(data)
			},
			// 解析音视频通话消息
			extractCallingInfoFromMessage(message) {
				const callingmessage = JSON.parse(message.payload.data);
				if (callingmessage.businessID !== 1) {
					return '';
				}
				const objectData = JSON.parse(callingmessage.data);
				switch (callingmessage.actionType) {
					case 1: {
						if (objectData.call_end >= 0 && !callingmessage.groupID) {
							return `结束时间：${formateTime(objectData.call_end)}`;
						}
						return '发起通话';
					}
					case 2:
						return '取消通话';
					case 3:
						if (objectData.data && objectData.data.cmd === 'switchToAudio') {
							return '切换语音通话';
						}
						if (objectData.data && objectData.data.cmd === 'switchToVideo') {
							return '切换视频通话';
						}
						return '已接听';
					case 4:
						return '拒绝通话';
					case 5:
						if (objectData.data && objectData.data.cmd === 'switchToAudio') {
							return '切换语音通话';
						}
						if (objectData.data && objectData.data.cmd === 'switchToVideo') {
							return '切换视频通话';
						}
						return '无应答';
					default:
						return '';
				}
			},
			parseCustom(message) {
				let renderDom = {
					...message.payload
				};
				switch (renderDom.data) {
					case 'invited':
					case 'getResume':
					case 'sendResume':
					case 'exchangePhone':
						if (renderDom.extension.length > 0) {
							renderDom.extension = JSON.parse(renderDom.extension);
						}
						break;
					case 'position':
						if (renderDom.extension.length > 0) {
							renderDom.extension = JSON.parse(renderDom.extension);
							findAllJobById({
								id: renderDom.extension.id
							}).then((res) => {
								this.position=res
							})
						}
						break;
					case 'resume':
						break;
					default:
						// 音视频通话消息解析
						const callingmessage = JSON.parse(renderDom.data);
						if (callingmessage.businessID === 1) {
							if (message.conversationType === 'C2C') {
								const c2cText = this.extractCallingInfoFromMessage(message);
								renderDom.data='c2cCalling';
								renderDom.extension=c2cText
							}
						}
				}
				return renderDom;
			}
		}
	};
</script>
<style scoped lang="scss">
	.text-message {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  max-width: 225px;
	  line-height: 26px;
	  padding: 6px 12px;
	  background: #FFF;
	  /* border: 1px solid #D9D9D9; */
	  box-shadow: 0 0 3px 0 #ccc;
	  border-radius: 2px 10px 10px 10px;
	}
	
	.my-text {
	  border-radius: 10px 2px 10px 10px;
	  border: 1px solid rgba(0, 110, 255, 0.30);
	  background: rgba(0, 110, 255, 0.10);
	}
	
	.message-body-span {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  /*justify-content: flex-start;*/
	  flex-wrap: wrap;
	  outline: none;
	  font-size: 14px;
	  color: #333333;
	  position: relative;
	  max-width: 60vw;
	}
	
	.message-body-span-text {
	  width: 100%;
	  display: inline;
	  word-wrap: break-word;
	  word-break: break-all;
	}
	
	.message-body-span-image {
	  display: inline-block;
	  width: 16px;
	  height: 16px;
	  margin: 0 2px;
	}
	.message-body-btn{
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  border-top: 1px solid #f6f6f8;
	  padding-top: 3px;
	  .operation-btn{
	    flex-grow: 1;
	    border-right: 1px solid #f6f6f8;
	    text-align: center;
	    font-size: 14px;
	    cursor: pointer;
	  }
	  .operation-btn:last-child{
	    border-right: none;
	  }
	}
	.position-card{
		width: 100%;
		padding: 0 60rpx;
		.list-item {
			width: 100%;
			background: #fff;
			border-radius: 10rpx;
			box-shadow: 0 0 10px 0 #efefef;
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			margin-bottom: 20rpx;
			border: 1px solid rgba(0, 0, 0, 0);
			.list-info {
				width: calc(100% - 0rpx);
				display: flex;
				flex-direction: column;
		
				view {
					
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
		
				.title {
					color: #000;
					font-weight: bold;
					font-size: 34rpx;
				}
		
				.address {
					color: #999;
					font-size: 26rpx;
					margin-top: 20rpx;
				}
		
				.label-block {
					font-size: 24rpx;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: left;
					margin-top: 20rpx;
		
					.label-item {
						padding: 8rpx 20rpx;
						background: #F5F6F8;
						color: #999;
						margin: 0 10rpx 20rpx 0;
					}
				}
		
				.wage {
					color: #FE7526;
					font-size: 36rpx;
					font-weight: bold;
		
					.unit {
						font-size: 28rpx;
						font-weight: normal;
					}
				}
			}
		}
	}
</style>
